<template>

  <!-- task 对应的 groupMap 数据 -->
  <n-modal
    v-model:show="showGroupModal"
    class=""
    preset="dialog"
    :title="task ? task.name : ''"
    :bordered="false"
    :segmented="{content: 'soft', footer: 'soft'}"
    :show-icon="false"
    :maskClosable="false"
    :style="{ width: '40em', minHeight: '23em' }"
    >
    <div style="display: flex; justify-content: center">
      <n-button round type="primary" @click="showGroupMapSelector()" size="small">
        添加
      </n-button>
    </div>

    <div v-for="item,index in taskGroupMaps" :key="'tasksGroupMap_' + index"
        class="groupMap">
      
      <div class="info">
        <span class="name">{{ item.name }}</span>
        <span class="rewritePath">
          {{ item.cover ? '覆盖' : '保留' }}
          {{ item.rewritePath }}
        </span>

        <div class="info-detail">
          <div class="source">
            <span class="host">
              <template v-if="item.sourceClientNode">
                {{ item.sourceClientNode.name }} {{ item.sourceClientNode.host }}:{{ item.sourceClientNode.port }}
              </template>
              <template v-else>
                *
              </template>
            </span>
            <div class="path"><n-ellipsis :line-clamp="1" :title="item.source">{{ item.source }}</n-ellipsis></div>  
          </div>

          <div class="target">
            <span class="host">
              <template v-if="item.targetClientNode">
                {{ item.targetClientNode.name }} {{ item.targetClientNode.host }}:{{ item.targetClientNode.port }}
              </template>
              <template v-else>
                *
              </template>
            </span>
            <div class="path"><n-ellipsis :line-clamp="1" :title="item.target">{{ item.target }}</n-ellipsis></div>  
          </div>

        </div>

      </div>

      <div class="right-op"> 
        <n-button size="small" tertiary type="error" @click="deleteTaskGroupMap(item)"> 
          <n-icon><DeleteRound/> </n-icon> 
        </n-button>
      </div>

    </div>

  </n-modal>

  <GroupMapSelector ref="groupMapSelectorRef" @selected="addTaskGroupMap"></GroupMapSelector>
</template>

<script setup>
import { inject, onMounted, ref } from 'vue'
import { DeleteRound } from '@vicons/material'
import serverApi from '/src/api/fsync/server.js'
import GroupMapSelector from './group-map-selector.vue'

const groupMapSelectorRef = ref(null)

// task 的 groupMap 弹窗
const showGroupModal = ref(false)
const task = ref(null) // 选中的 task
const taskGroupMaps = ref(null) // 选中的 task 的 groupMap

const groupMapLoading = ref(false)

const Message = inject("Message")
const Dialog = inject("Dialog")

// 获取 Task 的所有 GroupMap
const listTasksGroupMap = () => {
  groupMapLoading.value = true
  serverApi.taskGroupMaps(task.value.id).then(res => {
    groupMapLoading.value = false
    taskGroupMaps.value = res.data
  }, err => {
    groupMapLoading.value = false
    Message.error( err.message, { closable: true, duration: 3000 } )
    console.error(err)
  })
}

const show = (taskParam) => {
  task.value = taskParam
  showGroupModal.value = true
  listTasksGroupMap()

}
const close = () => {
  task.value = null
  showGroupModal.value = false
}

// 选择 groupMap选择器
const showGroupMapSelector = () => {
  let yetIds = []
  if(taskGroupMaps.value) {
    yetIds = taskGroupMaps.value.map(e => e.id)
  }
  // console.log("yetIds", yetIds)
  groupMapSelectorRef.value.show(yetIds)
}
// 选中回调
const addTaskGroupMap = (groupMap) => {
  let data = {
    taskId: task.value.id,
    groupMapId: groupMap.id,
  }

  serverApi.taskAddGroupMap(data).then(res => {
    Message.success( "添加成功", { closable: true, duration: 3000 } )
    groupMapSelectorRef.value.addSelectedId(groupMap.id)
    listTasksGroupMap()
  }, err => {
    Message.error( err.message, { closable: true, duration: 3000 } )
    console.error(err)
  })
}
// 删除 task-groupMap (依据 taskId 和 groupMapId 删除)
const deleteTaskGroupMap = (groupMap) => {
  let data = {
    taskId: task.value.id,
    groupMapId: groupMap.id,
  }

  Dialog.warning({
    title: '删除',
    content: '确认要删除吗 ？',
    positiveText: '删除',
    negativeText: '取消',
    maskClosable: false,
    onPositiveClick: () => {
      serverApi.taskDeleteGroupMap(data).then(res => {
        Message.success( "删除成功", { closable: true, duration: 3000 } )
        groupMapSelectorRef.value.addSelectedId(groupMap.id)
        listTasksGroupMap()
      }, err => {
        Message.error( err.message, { closable: true, duration: 3000 } )
        console.error(err)
      })
    },
  })

}

defineExpose({
  show, close,
})

</script>

<style scoped lang="scss">
.rewritePath{
  padding-left: 0.8em;
}
.host, .path, .rewritePath{
  font-size: 0.8em;
  color: grey;
}

.groupMap{
  display: flex;
  .info{
    flex: 1;
  }
}

.name{
  color: black;
}

.info-detail{
  display: flex;
  .source, .target{
    line-height: 0.8em;
    flex: 1;
  }
}

.right-op{
  display: flex;
  align-items: center;
}
</style>
